<script lang="ts" setup>
import { computed, ref } from 'vue';
import { CouponScene, CouponStatus } from '@/types/coupon';
import AptCouponMeta from './apt-coupon-meta.vue';
import AptCouponIcon from './apt-coupon-icon.vue';
import { useLocale } from '@/locale/locale';

const props = defineProps<{
  id: number;
  scene: CouponScene;
  status: CouponStatus;
  canUse: boolean;
  title: string;
  startDate: string;
  endDate: string;
  atLeast: string;
  description: string;
  properties: string;
  from: string;
}>();

const property = computed(() => {
  if (props.from === 'hotel') {
    return t('ApplicableProperties');
  }
  if (props.from === 'restaurant') {
    return t('ApplicableRestaurants');
  }
  return t('ApplicableScenarios');
});

defineEmits(['select']);

const { t } = useLocale();
const isShowed = ref(false);

const isDisabled = computed(() => {
  return props.status !== 1 || !props.canUse;
});

function openCouponUsedNotes() {
  isShowed.value = true;
}

function closeCouponUsedNotes() {
  isShowed.value = false;
}
</script>

<template>
  <view class="apt-coupon">
    <view :class="{ 'is-show': isShowed }" class="apt-coupon__header">
      <apt-coupon-icon :disabled="isDisabled" :scene="scene" />
      <view class="flex-1">
        <apt-coupon-meta
          :at-least="atLeast"
          :disabled="isDisabled"
          :end-date="endDate"
          :start-date="startDate"
          :title="title"
        />
        <view v-if="!isShowed" class="flex items-baseline mx-2 mt-3" @click="openCouponUsedNotes">
          <text class="text-xs text-fourth">{{ t('LAKey_couponUsedNotes') }}</text>
          <uni-icons type="right" size="11" color="#979797" style="line-height: 22rpx" />
        </view>
      </view>
      <view class="flex items-center" @click="$emit('select', id)">
        <slot></slot>
      </view>
    </view>
    <template v-if="isShowed">
      <view class="apt-coupon__divider">
        <view class="apt-coupon__divider-left"></view>
        <view class="apt-coupon__divider-line"></view>
        <view class="apt-coupon__divider-right"></view>
      </view>
      <view class="apt-coupon__body">
        <view class="mb-3 text-base text-primary font-medium">
          {{ t('LAKey_couponUsedNotes') }}
        </view>
        <view class="mb-3 text-sm text-primary">{{ description }}</view>
        <view class="mb-3 text-base text-primary font-medium">
          {{ property }}
        </view>
        <view class="text-sm text-primary">{{ properties }}</view>
        <view class="mt-5 flex justify-center items-baseline" @click="closeCouponUsedNotes">
          <text class="text-xs text-fourth mr-1_5">{{ t('LAKey_couponRetract') }}</text>
          <uni-icons type="up" size="11" color="#979797" style="line-height: 22rpx" />
        </view>
      </view>
    </template>
  </view>
</template>

<style lang="scss">
.apt-coupon {
  margin-bottom: 20rpx;
  position: relative;

  &__header {
    background: rgba(38, 156, 116, 0.04);
    border-radius: 16rpx;
    display: flex;
    padding: 32rpx 32rpx 18rpx;

    &.is-show {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  &__divider {
    align-items: center;
    background-color: rgba(38, 156, 116, 0.04);
    display: flex;
    height: 34rpx;
    position: relative;

    &-left,
    &-right {
      background-color: #fff;
      border-radius: 50%;
      height: 32rpx;
      width: 32rpx;
    }

    &-left {
      transform: translateX(-50%);
    }

    &-right {
      transform: translateX(50%);
    }

    &-line {
      border: 2rpx dashed #eee;
      width: 658rpx;
    }
  }

  &__body {
    background-color: rgba(38, 156, 116, 0.04);
    border-radius: 0 0 16rpx 16rpx;
    padding: 20rpx 32rpx 40rpx;
  }
}
</style>
